<template>
  <div class="dosage-list">
    <el-card>
      <el-form class="pageQuery" label-position="top">
        <el-form-item v-for="(field) in list.search_field" :label="field.title">
          <el-date-picker v-if="field.type == 'date_cycle'" v-model="list.search[field.key]" type="month" :placeholder="field.placeholder" :clearable="field.clearable" format="yyyyMM" value-format="yyyyMM"></el-date-picker>
          <el-select v-if="field.type == 'select'" :placeholder="field.placeholder" v-model="list.search[field.key]" :clearable="field.clearable" :multiple="field.multiple" :collapse-tags="field.multiple">
            <el-option v-for="(item, index) in  dic[field.dic]" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button :disabled="download.disabled"><download-excel :fetch="downExcel" :fields="download.header" :name="download.file_name">{{download.text}}</download-excel></el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card>
      <el-table :data="list.items" style="margin-bottom: 10px" border max-height="800">
        <el-table-column v-for="(field, index) in list.list_field" :key="index" :label="field.title" :prop="field.key" :width="field.width">
          <template slot-scope="{row}">
            <div v-if="field.key == 'iccid'"><a href="#" class="el-link el-link--primary is-underline" @click="cardDetailOpen(row)">{{row.iccid}}</a></div>
            <div v-else>{{row[field.key]}}</div>
          </template>
        </el-table-column>
        <template slot="empty">
          <myEmpty></myEmpty>
        </template>
      </el-table>
      <myPaging :queryInfo="list.search" :getListData="getList"></myPaging>
    </el-card>

    <el-drawer :visible.sync="card_detail_box.show" title="卡片详情" size="60%" custom-class="drawerWidth">
      <iot-card-detail :request="card_detail_box.request" v-if="card_detail_box.show" @close="card_detail_box.show = false"></iot-card-detail>
    </el-drawer>
  </div>
</template>

<script>
import IotCardDetail from "@/components/iotCard/card/cardDetail";

export default {
  name: "dosageList",
  components: {IotCardDetail},
  data(){
    return {
      user:{},
      dic:{
        status:[],
        merchant:[],
        group: [],
      },
      list:{
        search:{
          page: 1,
          size: 10,
          total: 0,
          cycle: '',
          cycle_mode: null,
          operator_key: 1,
          group_id: [],
          agent_app_id: [],
          agent_agency_id: [],
          agent_retailer_id: [],
        },
        search_field:[
          {
            type: 'select',
            key: 'operator_key',
            placeholder: '请选择',
            title: '运营商',
            dic: this.$api.Enum.DicTypeOperator,
            multiple: false,
            clearable: false,
          },
          {
            type: 'date_cycle',
            key: 'cycle',
            placeholder: '所有',
            title: '周期',
            clearable: false,
          },
          {
            type: 'select',
            key: 'cycle_mode',
            placeholder: '所有',
            title: '周期模式',
            dic: this.$api.Enum.DicTypeComboGroupMode,
            clearable: false,
          },
          {
            type: 'select',
            key: 'group_id',
            placeholder: '所有',
            title: '套餐组',
            dic: this.$api.Enum.DicTypeComboGroupList,
            multiple: true,
          },
          {
            type: 'select',
            key: 'agent_app_id',
            placeholder: '所有',
            title: '应用商',
            dic: this.$api.Enum.DicTypeResellerList,
            multiple: true,
          },
          {
            type: 'select',
            key: 'agent_agency_id',
            placeholder: '所有',
            title: '代理商',
            option: this.$api.Enum.DicTypeResellerList,
            multiple: true,
          },
          {
            type: 'select',
            key: 'agent_retailer_id',
            placeholder: '所有',
            title: '零售商',
            option: this.$api.Enum.DicTypeResellerList,
            multiple: true,
          },
        ],
        list_field: [
          {
            title: 'iccid',
            key: 'iccid',
            width: 180,
          },
          {
            title: '号码',
            key: 'msisdn',
          },
          {
            title: '应用商',
            key: 'agent_app_name',
          },
          {
            title: '代理商',
            key: 'agent_agency_name',
          },
          {
            title: '零售商',
            key: 'agent_retailer_name',
          },
          {
            title: '渠道',
            key: 'channel_name',
          },
          {
            title: '套餐组',
            key: 'group_name',
          },
          {
            title: '套餐组成',
            key: 'combo_names',
          },
          {
            title: '周期模式',
            key: 'cycle_mode_name',
          },
          {
            title: '套餐流量',
            key: 'combo_total_flow',
          },
          {
            title: '套餐语音',
            key: 'combo_total_voice',
          },
          {
            title: '使用流量',
            key: 'used_total_flow',
          },
          {
            title: '使用语音',
            key: 'used_total_voice',
          },
        ],
        items:[],
      },
      download: {
        text: '导出',
        file_name: '用量明细导出.xls',
        disabled: false,
        header: {},
        search: {},
        items: [],
      },
      card_detail_box:{
        show: false,
        request:{
          id: 0,
          operator_key: 0,
          iccid: ''
        }
      },
    }
  },
  mounted(){
    this.$api.forbidHeader(this.list.search_field, this.list.list_field)
    if (this.list.search.cycle == ''){
      const t = new Date()
      this.list.search.cycle = t.getFullYear().toString() +''+ ((t.getMonth()+1).toString().padStart(2,0))
    }
    this.getDic()
    // this.getList() // 取消默认查询
  },
  methods:{
    getList(){
      this.$api.combo.getDosageList(this.list.search, res=>{
        if (!res.status){
          return this.$message.error(res.message)
        }
        this.list.items = res.data.list;
        this.list.search.total = res.data.page.total;
      })
    },
    async downExcel() {
      if (this.download.disabled){
        return false
      }
      this.download.disabled = true
      this.download.text = '数据导出中,请稍等.'
      Object.assign(this.download.search, this.list.search)
      this.download.file_name = '用量明细-'+this.dic[this.$api.Enum.DicTypeOperator].filter((item)=>{return item.id== this.download.search.operator_key})[0].name+'-'+this.download.search.cycle+'.xlsx'
      this.download.header = {}
      this.download.items = []
      this.download.search.size = 500
      this.download.search.page = 1
      this.list.list_field.forEach(item =>{
        if (item.key == "iccid" || item.key == "msisdn"){
          this.download.header[item.title] = {field: item.key, callback: function(value){ return '\'' + value }}
        }else {
          this.download.header[item.title] = item.key
        }
      })
      this.getDownExcelData()
      this.download.disabled = false
      this.download.text = '导出'
      return this.download.items
    },
    getDownExcelData() {
      this.$api.combo.getDosageList(this.download.search, res=>{
        if (!res.status){
          return this.$message.error(res.message)
        }
        this.download.items.push(... res.data.list)
        if ((this.download.search.total - this.download.search.page * this.download.search.size) < 0 || res.data.page.total < this.download.search.size) {

        } else {
          this.download.search.page += 1
          this.download.search.total = res.data.page.total;
          this.getDownExcelData()
        }
      },{async:false})
    },
    getDic(){
      let types = [
        this.Enum.DicTypeResellerList,
        this.Enum.DicTypeComboGroupList,
        this.Enum.DicTypeOperator,
        this.$api.Enum.DicTypeComboGroupMode
      ]
      this.$api.foundation.dicListExtendCache(types, {}, res => {
        this.dic = res;
        this.dic[this.Enum.DicTypeComboGroupList] = res[this.Enum.DicTypeComboGroupList].filter((item)=>{
          return item.extend.flow_type == this.Enum.FlowTypePool
        })
      });
    },
    cardDetailOpen(row) {
      this.card_detail_box.show = true
      this.card_detail_box.request ={
        id: row.card_id,
        operator_key: row.operator_key,
        iccid: row.iccid,
      }
    },
  }
}
</script>

<style scoped>

</style>